<template>
  <div class="sign-up">
    <div class="container">
      <div class="row outer">
        <div class="col-xs-12 col-sm-10 col-md-8 col-lg-6 form-box">
          <div><!-- tab area -->
            <b-nav tabs fill class="tab">
              <b-nav-item :active="isLogin" @click="login">登录</b-nav-item>
              <b-nav-item :active="!isLogin" @click="signup" >注册</b-nav-item>
            </b-nav>
          </div>
          <div> <!-- form area -->
            <div v-if="isLogin"><FormMini /></div>
            <div v-else><Form /></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Form from "../components/Form";
import FormMini from "../components/FormMini"

export default {
  name: "signup",
  data() {
    return {
      isLogin: true
    };
  },
  components: {
    Form,
    FormMini
  },
  methods: {
    login() {
      this.isLogin = true;
    },
    signup() {
      this.isLogin = false;
    }
  },
};
</script>

<style lang="scss" scoped>
.form-box {
  padding: 30px;
  margin: 0 auto;
  text-align: left;
  border: 1px solid #eeeeee;
  border-radius: 15px;
  box-shadow: 2px 2px 6px 2px;
}

.outer {
  margin-top: 45px;
}

.tab{
  margin-bottom: 15px;
}
</style>
